Image Maps

There are many kinds of links in html.

We have created text links, where a piece of text is underlined and links to another web page.

We have created graphics links, where a graphics is linked to another web page.

In image maps, hotspots in a graphic are used for links. Dreamweaver has a tool for doing this which makes it pretty easy. Here's how:

• Add an image to your Web page.
• Click on the image to highlight it.
• From the properties menu, find the "map" area and choose a hotspot drawing tool - rectangle, circle, or polygon.
• Draw the shape you want on your image.
• In the properties window for the hotspot, add the URL that hotspot should link to.
• Also be sure to add "alt text" so that users know what their choices are.
• Continue adding hotspots until your map is complete. Note that the order you enter the hotspots does matter if they overlap. See my example below to see how to do this.
• Save the page.
• Be sure to test it and make sure it works. View the map page in a browser. Hover the mouse over the hotspot areas and look to see what URL is displayed in the lower left of the browser. Move the mouse around. Make sure that the map is doing what you want. Try a few clicks and make sure it works.

Example

Here's a sample image map:

Here's what it looks like in the design view:

And here's what the html code looks like:

<img src="camelface.JPG" width="400" height="300" border="0" usemap="#Map" />
  <map name="Map" id="Map">
    <area shape="rect" coords="124,82,197,138" href="#eye" alt="Eye" title="Eye"/>
    <area shape="rect" coords="202,154,297,238" href="#mouth" alt="Mouth" title="Camel's Mouth"/>
    <area shape="rect" coords="-10,194,192,323" href="#neck" alt="Camel's Neck" title="Camel's Neck"/>
    <area shape="rect" coords="84,64,305,230" href="#camel" alt="Braying Camel" title="Braying Camel"/>
    <area shape="rect" coords="4,4,389,292" href="#sand" alt="Sand" title="Sand"/>
  </map>

Explanation

The "usemap" option on the image tells us which actual map to use.

The map definition starts with <map...> and ends with </map>

There are several shapes possible for the hotspots, but I usually use rectangles, which are easy to understand.

Coordinates are measured from upper left of the image, measured in pixels.

The href link sets the hyperlink. I have just used dummy links but you can put in a full URL.

The "alt" argument is the text that on some browsers will show if you hover the mouse over the map. My browser (Safari) doesn't display them. I'm told that this also will be read to blind people that are using the page. I have my doubts, but many clients such as the City of Santa Monica require this to work, so it's good to know how to do this.

The "title" tag is displayed by my browser when I hover the mouse over one of the hotspots. My version of Dreamweaver doesn't implement this tag, so you have to enter it by hand if you want this to work. I made it the same as the "alt" tag.

You could create all the coordinates by hand, but it would be pretty hard to figure the pixel locations. Better to let Dreamweaver make the basic map and then enter your changes by hand.

Assignment

Find a picture that you like and create a web page with it. Create three image hotspots in an image map, and link them to appropriate URLs. The objective is simply to show that you can make an image map.